<div id="role-setting-view">
  <div class="pageheader">
    <h2><i class="fa fa-home"></i>角色菜单配置</h2>
  </div>
  <div class="page">
    <div class="al-list-container">
      <form name="modalForm" class="form-horizontal al-search-container" role="form">
        <div class="form-group">
          <label class="col-sm-3 control-label">角色名称<span class="attr-need">*</span></label>
          <div class="col-sm-8">
            <input class="form-control" ng-model="data.name" type="text"
                   ng-required="true" name="roleName"
                   placeholder="" maxlength="50"/>
            <div class="help-block with-errors"
                 ng-if="modalForm.roleName.$invalid && !modalForm.roleName.$pristine">
              角色名称
            </div>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">角色描述</label>
          <div class="col-sm-8">
            <textarea class="form-control" ng-model="data.description" rows="3" placeholder=""></textarea>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">角色类型</label>
          <div class="col-sm-8">
            <span class="ui-select">
              <select ng-model="data.type"
                      ng-options="option.value as option.name for option in typeList"></select>
            </span>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-3 control-label">状态</label>
          <div class="col-sm-8">
            <nobr>
              <label class="ui-radio" ng-repeat="option in enabledList">
                <input name="status" ng-value="option.value" type="radio" ng-model="data.enabled">
                <span>{{option.name}}</span>
              </label>
            </nobr>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-3"></div>
          <div class="col-sm-2">
            <button type="button" class="btn btn-default" ng-click="newSetting()">重置</button>
          </div>
          <div class="col-sm-2">
            <button type="button" class="btn btn-primary" ng-disabled="modalForm.$invalid" ng-click="saveSetting()">保存</button></div>
          <div class="col-sm-5"></div>
        </div>
      </form>
      <div class="panel panel-default al-pad-lr-10">
        <ul id="roleTab" class="nav nav-tabs">
          <li id="authorityTab" class="active"><a ng-click="selectTab($event,'authorityTab')">权限</a></li>
          <li id="menuTab"><a ng-click="selectTab($event,'menuTab')">菜单</a></li>
        </ul>
        <div id="roleTabContent" class="tab-content">
          <!--pane-->
          <div class="tab-pane active al-pad-lr-10" id="authorityTabPane">
            <div class="al-no-data" ng-show="authorityData.length==0">
              尚未绑定权限<br>
              <button class="btn btn-primary" ng-click="bindAuthority()">绑定权限</button>
            </div>
            <table ng-table="authorityTableParams" ng-show="authorityData.length>0"
                   class="table  table-bordered table-striped table-condensed al-table-container">
              <caption>
                <button style="float:right;" class="btn btn-primary" ng-click="bindAuthority()">绑定权限</button>
              </caption>
              <thead>
              <tr>
                <td>权限名称</td>
                <td>描述</td>
                <td>类型</td>
                <td>状态</td>
                <td>操作</td>
              </tr>
              </thead>
              <tbody>
              <tr ng-repeat="item in $data">
                <td>{{item.authority}}</td>
                <td>{{item.description}}</td>
                <td>{{item.type|constantTransfer:authorizationTypeList}}</td>
                <td>{{item.enabled|constantTransfer:enabledList}}</td>
                <td>
                  <button class="btn btn-warning btn-sm al-fl-rt"
                          ng-confirm-click="确定要执行删除操作吗？"
                          ng-click="removeAuthority(item)">移出
                  </button>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <div class="tab-pane al-pad-lr-10" id="menuTabPane">
            <div class="al-no-data" ng-show="menuData.length==0">
              尚未绑定菜单<br>
              <button class="btn btn-primary" ng-click="bindMenu()">绑定菜单</button>
            </div>
            <table ng-table="menuTableParams" ng-show="menuData.length>0"
                   class="table  table-bordered table-striped table-condensed al-table-container">
              <caption>
                <button style="float:right;" class="btn btn-primary" ng-click="bindMenu()">绑定菜单</button>
              </caption>
              <thead>
              <tr>
                <th>菜单名称</th>
                <th>菜单url</th>
                <th>菜单层级</th>
                <th>状态</th>
                <td>操作</td>
              </tr>
              </thead>
              <tbody>
              <tr ng-repeat="item in $data">
                <td>{{item.moduleName}}</td>
                <td>{{item.moduleUrl}}</td>
                <td>{{item.parentName|constantTransfer:menuLvList}}</td>
                <td>{{item.enabled|constantTransfer:enabledList}}</td>
                <td>
                  <button class="btn btn-warning btn-sm al-fl-rt"
                          ng-confirm-click="确定要执行移除操作吗？"
                          ng-click="removeMenu(item)">移出
                  </button>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>


    <!--<div ivh-treeview="menus"-->
    <!--ivh-treeview-expand-to-depth="-1"-->
    <!--ivh-treeview-id-attribute="'id'"-->
    <!--ivh-treeview-label-attribute="'name'"-->
    <!--ivh-treeview-children-attribute="'subMenus'"-->
    <!--ivh-treeview-selected-attribute="'checked'">-->
    <!--&lt;!&ndash;ivh-treeview-twistie-expanded-tpl="'-'"&ndash;&gt;-->
    <!--&lt;!&ndash;ivh-treeview-twistie-collapsed-tpl="'+'"&ndash;&gt;-->
    <!--&lt;!&ndash;ivh-treeview-twistie-leaf-tpl="'-'"&ndash;&gt;-->
    <!--</div>-->
  </div>
</div>
